<script setup>
import Copypage from '@/components/table/copypage.vue'

import { Document, DocumentAdd, WarningFilled } from '@element-plus/icons-vue'
import { timeAgo, utcTime } from '@/utils/util'
import moment from 'moment'

import { ref, onMounted } from 'vue'

const props = defineProps({
    blocksList: Array
});

const time2 = moment()

</script>


<template>
    <div class="table">
        <div>
            <el-table :data="blocksList" style="width: 100%">

                <el-table-column prop="blockNumber" label="Block">
                    <template #default="scope">
                        <p><router-link :to="'/block/' + scope.row.blockNumber">{{ scope.row.blockNumber }}</router-link>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="ts" label="Age" min-width="120">
                    <template #default="scope">
                        <el-tooltip class="item" effect="dark" :hide-after="0" :content="utcTime(scope.row.ts)"
                            placement="top">
                            <span>{{ timeAgo(scope.row.ts, time2) }}</span>
                        </el-tooltip>

                    </template>
                </el-table-column>

                <el-table-column prop="txs" label="Txn" max-width="140">
                    <template #default="scope">
                        <p v-if="scope.row.txs > 0"><router-link
                                :to="{ path: '/txs', query: { block: scope.row.blockNumber } }">{{ scope.row.txs
                                }}</router-link></p>
                        <p v-if="scope.row.txs === 0">{{ scope.row.txs }}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="miner" label="Miner" min-width="140">
                    <template #default="scope">
                        <Copypage :id="scope.row.miner" :type="2" :isblue="false" />
                    </template>
                </el-table-column>

                <el-table-column prop="gasUsed" label="Gas Used" min-width="140">
                    <template #default="scope">
                        <p class="block_p">{{ scope.row.gasUsed }} <i>( {{ ((scope.row.gasUsed / scope.row.gasLimit) *
                            100).toFixed(2) }}% )</i></p>
                        <el-progress :percentage="parseFloat(((scope.row.gasUsed / scope.row.gasLimit) * 100).toFixed(2))"
                            :stroke-width="3"></el-progress>
                    </template>

                </el-table-column>


                <el-table-column prop="gasLimit" label="Gas Limit" min-width="140">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>



<style lang="less" scoped>
.block_p i {
    font-size: 0.75rem;
    color: var(--color-text2);
}
</style>